import React, { Component } from 'react';
import Board from '../../components/Board/index.jsx';


class DndGame extends Component {

  constructor(props) {
    super(props);
    this.state = {
      knightPosition: [7, 4]
    };
  }

  canMoveKnight = (toX, toY) => {
    const { knightPosition } = this.state;
    const [x, y] = knightPosition;
    const dx = toX - x;
    const dy = toY - y;

    return (Math.abs(dx) === 2 && Math.abs(dy) === 1) ||
           (Math.abs(dx) === 1 && Math.abs(dy) === 2);
  }

  render() {
    const { knightPosition } = this.state;
    return (
      <div style={{
        height: '80vh'
      }}>
        <Board knightPosition={knightPosition} onSquareClick={(toX, toY) => {
          if (this.canMoveKnight(toX, toY)) {
            this.setState({
              knightPosition: [toX, toY] 
            });
          }
        }}></Board>
      </div>
    );
  }
}

export default DndGame;